<template>
    <div class="form-container">
        <div class="form-top"></div>
        <div class="form-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>分类管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/materialClassification' }">分类列表</el-breadcrumb-item>
                <el-breadcrumb-item>编辑分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-content">

            <el-form ref="form" :model="form" :rules="rules" label-width="126px">
                <!--        <el-form-item label="类型" prop="type_id">-->
                <!--          <el-select v-model="form.type" placeholder="通用">-->
                <!--            <el-option v-for="item in types" :key="item.id" :label="item.title" :value="item.id"></el-option>-->
                <!--          </el-select>-->
                <!--        </el-form-item>-->
                <!-- <el-form-item label="父级分类" prop="type_id">
                    <el-cascader ref="organizerUnit" @change="handleParentType" :options="articleTypes" v-model="form.pid" :show-all-levels="false" clearable :props="{checkStrictly:true,emitPath:false}" placeholder="不选择默认为顶级分类"></el-cascader>
                </el-form-item> -->
                <el-form-item label="名称标题" prop="title">
                    <el-input v-model="form.type_name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="封面图">
                    <el-upload action="/api/client/base/uploadfile" list-type="picture-card" :on-preview="handlePictureCardPreview" ref="upload" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :auto-upload="true" :limit="50" :headers="myHeaders" :file-list="fileList" accept="image/jpeg, image/jpg, image/gif, image/png" :multiple="false">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

                </el-form-item>
                <el-form-item label="排序">
                    <el-col :span="5">
                        <el-input v-model="form.sort" placeholder="数字越大越靠后"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-row>
                        <el-button type="danger" @click="confirmAdd('form')">立即保存</el-button>
                        <el-button type="default" @click="cancel()">返回</el-button>
                    </el-row>
                </el-form-item>

            </el-form>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                validate: false,
                activeName: 'first',
                articleTypes: [],
                types: [{
                    id: 0,
                    title: '通用',
                }, {
                    id: 1,
                    title: '装修攻略',
                }, ],
                form: {
                    // type: 2,
                    pid: '',
                    type_name: '',
                    sort: 0,
                },
                rules: {
                    type_name: [
                        { required: true, message: '请输入文章标题', trigger: 'blur' },
                    ],

                },
                fileList: [],
                dialogImageUrl: "",
                dialogVisible: false,
                myHeaders: {
                    'access-token': this.$store.state.token, //这里重新定义了请求头
                    'Authorization': this.$store.state.token,
                    'user-id': this.$store.state.user_id
                },
            }
        },
        mounted() {
            this.loadArticleType();
        },
        methods: {
            handleRemove(file, fileList) {
                this.fileList = fileList
            },
            handlePictureCardPreview(file) {
                console.log('file', file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleAvatarSuccess(res, file, fileList) {
                console.log('fileList', fileList);
                this.fileList = fileList
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传商品图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            loadArticleType() {
                const id = this.$route.query.id;
                this.$http.get('/api/root/articleType/edit', { id: id })
                    .then(rest => {
                        rest.data.typeInfo.cover.map(item => {
                            this.fileList.push({
                                id: item.img_id,
                                url: item.image_path
                            })
                        });
                        this.form = {
                            ...rest.data.typeInfo
                        };
                        // this.form.pid = rest.
                        this.articleTypes = rest.data.types ? rest.data.types : [];
                    })
            },
            confirmAdd(form) {
                this.validateFormData(form);
                if (this.validate) {
                    const _ths = this;
                    if (this.fileList) {
                        this.fileList.map(item => {
                            if (item.response) {
                                _ths.form.cover = item.response.data.id;
                            } else {
                                _ths.form.cover = item.id;
                            }
                        })
                    }
                    this.$http.post('/api/root/articleType/edit', { ...this.form })
                        .then(rest => {
                            if (rest.msg == 'ok') {
                                this.$message.success('修改成功');
                                setTimeout(function() {
                                    _ths.$router.push({ name: 'materialClassification' })
                                }, 800)
                            } else {
                                this.form = {
                                    ...this.form,
                                };
                                this.$message.error(rest.msg);
                            }
                        })
                }
            },
            cancel() {
                this.$router.push({ name: 'materialClassification' })
            },

            /**
             * 验证表单数据
             * @param form
             */
            validateFormData(form) {
                this.$refs[form].validate((valid) => {
                    if (!valid) {
                        this.$message({
                            message: '表单数据未填写完整,操作失败！',
                            type: 'warning'
                        });
                        return false;
                    }
                    this.validate = true;
                    return true;
                })
            },
            handleParentType(value) {
                this.form.pid = value;
                if (this.$refs.organizerUnit) {
                    this.$refs.organizerUnit.dropDownVisible = false
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .form-container {

        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: #F5F5F5;

        .el-input__inner {
            width: auto;
        }

        .line {
            width: 15px;
        }

        .form-top {
            height: 4.568%;
            background-color: #fff;
            margin-bottom: 20px;
            width: 100%;
        }

        .form-breadcrumb {

            height: 10%;
            padding: 0 20px 20px 20px;

            .el-breadcrumb {
                height: 100%;
                font-size: 14px;
                line-height: 1;
                display: flex;
                align-items: center;
                padding-left: 15px;
                margin-bottom: 20px;
                background-color: #fff;
            }
        }


        .form-content {
            height: 86%;
            padding: 0 20px 20px 20px;

            .el-form {
                height: 100%;
                background-color: #fff;
                padding: 4% 2.5%;
            }
        }


    }
</style>